<template>
    <div class="accountSetting-wrapper">
        <IHeader class="header" back="true" title="账户设置"></IHeader>
        <scroller class="itemList" show-scrollbar="false" v-if="!loadingShow">
            <div class="itemCell flex_row border-bottom-cecece" @click="jumpTo('/account/personalInfo')">
                <div class="user flex_row">
                    <image class="avatar" :src="informationObj.headPortraitUrl ? informationObj.headPortraitUrl : imgPath('default_avatar.png')"></image>
                    <text class="itemName">{{informationObj.nickname ? informationObj.nickname : '无昵称'}}</text>
                </div>
                <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
            </div>
            <div class="itemCell item_height flex_row border-bottom-cecece" @click="jumpTo('/account/myAddress')">
                <text class="itemName">地址管理</text>
                <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
            </div>
            <!--<div class="itemCell margin_top_24 item_height flex_row border-bottom-cecece">-->
                <!--<text class="itemName">实名认证</text>-->
                <!--<image class="arrow_right" :src="imgPath('arrow_right.png')"></image>-->
            <!--</div>-->
            <div class="itemCell item_height flex_row border-bottom-cecece" @click="jumpTo('/account/accountSafe')">
                <text class="itemName">账户安全</text>
                <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
            </div>
            <!--<div class="itemCell item_height flex_row border-bottom-cecece" @click="jumpTo('')">-->
                <!--<text class="itemName">支付设置</text>-->
                <!--<image class="arrow_right" :src="imgPath('arrow_right.png')"></image>-->
            <!--</div>-->
            <!--<div class="itemCell item_height flex_row border-bottom-cecece">-->
                <!--<text class="itemName">清楚缓存</text>-->
                <!--<image class="arrow_right" :src="imgPath('arrow_right.png')"></image>-->
            <!--</div>-->
            <!--<div class="itemCell item_height flex_row border-bottom-cecece">-->
                <!--<text class="itemName">问题反馈</text>-->
                <!--<image class="arrow_right" :src="imgPath('arrow_right.png')"></image>-->
            <!--</div>-->
            <div class="itemCell item_height flex_row border-bottom-cecece" @click="jumpTo('/account/userProtocol')">
                <text class="itemName">用户协议</text>
                <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
            </div>
            <div class="itemCell item_height flex_row" @click="jumpTo('/account/aboutApp')">
                <text class="itemName">关于泳衣库</text>
                <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
            </div>
            <Buttons class="exit" word="退出登录" @doclick="handleExitLogin"></Buttons>
        </scroller>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import Buttons from '@/components/buttons'
import { WxcLoading } from 'weex-ui'
import { userInformation } from '@/api/user'
const modal = weex.requireModule('modal')
const storage = weex.requireModule('storage')
export default {
  name: 'accountSetting',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: true, // loading
      informationObj: null // 个人信息
    }
  },
  mounted () {
    const that = this
    that.$api.get(userInformation, {}, (res) => {
      that.informationObj = res.data
      that.loadingShow = false
    }, () => {
      that.loadingShow = false
    }, true)
  },
  methods: {
    jumpTo (path) { // 跳转
      if (!path) {
        modal.toast({
          message: '该功能暂未开放',
          duration: 0.8
        })
        return
      }
      this.$router.push(path)
    },
    handleExitLogin () { // 退出登录
      const that = this
      storage.removeItem('userId', event => {
        if (event.result === 'success') {
          modal.toast({
            message: '退出成功'
          })
        }
      })
      setTimeout(() => {
        that.$router.push('/login')
      }, 500)
    }
  },
  components: {
    IHeader,
    Buttons,
    WxcLoading
  }
}
</script>

<style scoped>
    .flex_row {
        flex-direction: row;
    }
    .border-bottom-cecece {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #cecece;
    }
    .item_height {
        height: 112px;
    }
    .margin_top_24 {
        margin-top: 24px;
    }
    .accountSetting-wrapper {
        background-color: #f5f5f5;
    }
    .itemList {
        margin-top: 88px;
        background-color: #f5f5f5;
    }
    .itemCell {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 16px;
        padding-bottom: 16px;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
    }
    .avatar {
        width: 120px;
        height: 120px;
        margin-right: 24px;
        border-radius: 60px;
    }
    .user {
        align-items: center;
    }
    .itemName {
        font-size: 30px;
    }
    .arrow_right {
        width: 24px;
        height: 36px;
    }
    .exit-login {
        flex-wrap: wrap;
        justify-content: center;
    }
    .exit {
        margin-top: 300px;
    }
</style>
